<template>
  <div id="c1"></div>
</template>
<script>
import G2 from '@antv/g2'
import DataSet from '@antv/data-set'
export default {
  data () {
    return {
      data: [
        { month: 'Jan', 订单量: 7.0, 成交量: 3.9 },
        { month: 'Feb', 订单量: 6.9, 成交量: 4.2 },
        { month: 'Mar', 订单量: 9.5, 成交量: 5.7 },
        { month: 'Apr', 订单量: 14.5, 成交量: 17.5 },
        { month: 'May', 订单量: 18.4, 成交量: 11.9 },
        { month: 'Jun', 订单量: 21.5, 成交量: 23 },
        { month: 'Jul', 订单量: 25.2, 成交量: 17.0 },
        { month: 'Aug', 订单量: 26.5, 成交量: 16.6 },
        { month: 'Sep', 订单量: 23.3, 成交量: 14.2 },
        { month: 'Oct', 订单量: 18.3, 成交量: 10.3 },
        { month: 'Nov', 订单量: 13.9, 成交量: 6.6 },
        { month: 'Dec', 订单量: 9.6, 成交量: 4.8 }
      ],
      chart: null
    }
  },
  mounted () {
    this.initComponent()
  },
  methods: {
    initComponent () {
      const ds = new DataSet()
      const dv = ds.createView().source(this.data)
      const chart = new G2.Chart({
        container: 'c1',
        forceFit: true,
        height: 300,
        padding: 'auto'
      })
      dv.transform({
        type: 'fold',
        fields: ['订单量', '成交量'], // 展开字段集
        key: 'city', // key字段
        value: 'temperature' // value字段
      })
      chart.source(dv, {
        month: {
          range: [0, 1]
        }
      })
      chart.tooltip({
        crosshairs: {
          type: 'line'
        }
      })
      chart.axis('temperature', {
        label: {
          formatter: val => {
            return val + ''
          }
        }
      })
      chart
        .line()
        .position('month*temperature')
        .color('city')
        .shape('smooth')
      chart
        .point()
        .position('month*temperature')
        .color('city')
        .size(4)
        .shape('circle')
        .style({
          stroke: '#fff',
          lineWidth: 1
        })
      chart.render()
    }
  }
}
</script>
